<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <script>
        //滚动时会一直追着你页面的那玩样

        //与onload类似,滚动时会触发
        window.onscroll = function () {
            let oDiv = document.getElementById('div1');

            let scrollTop = document.documentElement.scrollTop; //当前页面与顶部的距离
            //console.log(scrollTop);

            let clientHeight = document.documentElement.clientHeight;    //浏览器可显示的高度
            // console.log(clientHeight);

            //每当你滚动时,动态的来修改右下角那个弹窗位置
            //逻辑:浏览器的高度 - div的高度 + 当前滚动的高度 + 修正值
            oDiv.style.top = clientHeight - oDiv.offsetHeight + scrollTop -10 + 'px';

            //如果想让他居中可以 (浏览器的高度-div的高度)/2 + 滚动高度 + 修正值; 注意,需要向上取整!
            //oDiv.style.top = Math.ceil((clientHeight - oDiv.offsetHeight)/2) + scrollTop -10 + 'px';


            //其他:也可以做成变速运动,但现在浏览器的效果已经非常平滑了
        }


    </script>

    <style>
        #div1 {
            height: 200px;
            width: 100px;
            background: darkgoldenrod;
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
    </style>
</head>

<!-- 需要页面足够高 -->
<body style="height: 2000px;">

<div>
    <div id="div1"></div>

</div>

</body>
</html>